<template>
  <div>
    <div class="table-page-search-wrapper">
      <el-card>
        <el-form inline :model="queryParams" @submit.native.prevent>
          <el-row :gutter="48">
            <!-- 搜索item项 -->
            <el-col :md="8" :sm="24">
              <el-form-item label="资源名称" prop="moduleName">
                <el-input
                  v-model.trim="queryParams.keyword"
                  placeholder="请输入资源名称查询"
                  clearable
                  @keyup.enter.native="handleSearch"
                />
              </el-form-item>
            </el-col>
            <!-- 查询按钮 -->
            <el-col :md="16" :sm="24">
              <el-form-item>
                <span
                  class="table-page-search-submitButtons"
                >
                  <el-button type="primary" @click="handleSearch">查 询</el-button>
                  <el-button style="margin-left: 8px" @click="resetQuery">重 置</el-button>
                </span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="table-block">
      <el-card>
        <div slot="header" class="clearfix">
          <!-- 左侧修改新增按钮组 -->
          <div class="left">
            <el-button type="primary" @click="handleAdd('add',null)" v-if="menuButtonPermissions.includes('resources:add')">新 增</el-button>
            <el-button type="primary" v-else style="visibility: hidden;">新 增</el-button>

          </div>
          <!-- 右侧按钮组 -->
          <div class="right">
            <div class="table-operator card-right">
            </div>
          </div>
        </div>
        <!-- 表格数据列表 -->
        <el-table :data="tableList" stripe :height="tableMaxHeigth" row-key="id" :tree-props="{children: 'subRes'}">
          <el-table-column prop="resName" label="资源名称" show-overflow-tooltip/>
          <el-table-column prop="resUrl" label="资源值" align="center" width="400" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.resUrl ? scope.row.resUrl : scope.row.buttonKey }}
            </template>
          </el-table-column>
          <el-table-column prop="resType" label="类型" align="center" width="60">
            <template slot-scope="scope">
              {{ getResType(scope.row.resType) }}
            </template>
          </el-table-column>
          <el-table-column prop="resIcon" label="图标" align="center" width="60" >
            <template slot-scope="scope">
              <svg-icon :icon-class="scope.row.resIcon ? scope.row.resIcon : ''" />
            </template>
          </el-table-column>
          <el-table-column prop="sortNum" label="排序" align="center" width="60"/>
          <el-table-column prop="ifShow" label="是否显示" align="center" width="100">
            <template slot-scope="scope">{{ scope.row.ifShow ? '是' : '否' }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100" v-if="menuButtonPermissions.includes('resources:add') || menuButtonPermissions.includes('resources:upd') || menuButtonPermissions.includes('resources:delete')">
            <template #default="{ row }">
              <el-button
                type="text"
                icon="el-icon-plus"
                class="table-button-size"
                v-if="(row.resType === 1 || row.resType === 2) && menuButtonPermissions.includes('resources:add')"
                title="新增下级"
                @click="handleAdd('addNext',row)"></el-button>
              <el-button
                type="text"
                icon="el-icon-edit"
                class="table-button-size"
                v-if="menuButtonPermissions.includes('resources:upd')"
                title="编辑"
                @click="handleAdd('update',row)"></el-button>
              <el-button
                type="text"
                icon="el-icon-delete"
                class="table-button-size"
                v-if="menuButtonPermissions.includes('resources:deleted')"
                title="删除"
                @click="handleDelete(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <edit ref="editRef" @getTableList="getTableList" :tableList="tableList"></edit>
  </div>
</template>

<script>
import edit from './edit.vue'
import { getList, deleted } from '@/api/resourceManage'
import actions from '@/cros/actions'

export default {
  name: 'ResourceManage',
  components: {
    edit
  },
  data () {
    return {
      tableMaxHeigth: 0,
      tableList: [],
      menuButtonPermissions: [],
      // 查询参数
      queryParams: {
        keyword: ''
      }
    }
  },
  mounted () {
    actions.onGlobalStateChange((state, prevState) => {
      this.menuButtonPermissions = state.menuButtonPermissions.map(v => v.buttonKey)
    }, true)
    this.getTableList()
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.setTableHeight)
    // 初始化表格高度
    this.setTableHeight()
  },
  methods: {
     beforeDestroy () {
    // 组件销毁前移除事件监听
    window.removeEventListener('resize', this.setTableHeight)
    },
    setTableHeight () {
      this.$nextTick(() => {
        this.tableMaxHeigth = document.body.offsetHeight - 230
      })
    },
    getResType (type) {
      switch (type) {
        case 1:
         return '目录'
      case 2:
         return '菜单'
          case 3:
         return '按钮'
          case 4:
        return '外链'
          case 5:
         return 'iFrame'
        default:
          break
      }
    },
    handleDelete (row) {
      console.log(row, row.subRes && row.subRes, 'rowssssss')
   const str = !row.subRes ? `是否删除名称为 '${row.resName}' 的${this.getResType(row.resType)}?` : `是否删除名称为 '${row.resName}' 的${this.getResType(row.resType)}及下级资源?`
       this.$confirm(str, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
       }).then(() => {
         deleted({ id: row.id }).then((res) => {
           if (res.code === 'success') {
            this.$message.success('操作成功')
          this.getTableList()
           } else {
            this.$message.error(res.msg)
          }
         })
        }).catch(() => {
          console.log('取消删除')
        })
    },
    handleSearch () {
      this.getTableList()
    },
    // 获取列表数据
    async getTableList () {
      const res = await getList(this.queryParams)
      console.log('列表数据', res)
      this.tableList = res.data
    },
    // 重置
    resetQuery () {
      this.queryParams.keyword = ''
      this.getTableList()
    },
    // 新增 / 编辑
    handleAdd (str, row) {
      this.$refs.editRef.open(str, row)
    }
  }
}
</script>
<style scoped lang="scss">
.dataCount{
  cursor: pointer;
}
</style>
